import React, { Component } from 'react'
import GoBack from '../../components/GoBack/GoBack'
import img from '../../assets/img/log.png'
import './register.css'
import { reqRegister } from '../../request/api'
export default class Register extends Component {
  constructor(){
    super()
    this.state={
      user:{
        phone:"",
        nickname:"",
        password:""
      }
    }
  }

  changeuser(e,key){
    this.setState({
      user:{
        ...this.state.user,
        [key]:e.target.value
      }
    })
  }
  zhuce(){
    reqRegister(this.state.user).then(res=>{
      if(res.data.code===200){
        this.props.history.push("/login")
      }
    })
  }
  render() {
    let {user:{phone,nickname,password}}=this.state
    return (
      <>
        <div className="login">
          <div className="login-top">
            <GoBack></GoBack>
            <span>注册</span>
          </div>
          <div className="content">
            <img src={img} alt="" />
            <div>
              <input type="text" placeholder='手机号' value={phone} onChange={(e)=>this.changeuser(e,'phone')}/>
            </div>
            <div>
              <input type="text" placeholder='昵  称' value={nickname} onChange={(e)=>this.changeuser(e,'nickname')}/>
            </div>
            <div>
              <input type="text" placeholder='密   码' value={password} onChange={(e)=>this.changeuser(e,'password')}/>
            </div>
            <button onClick={()=>this.zhuce()}>注册</button>
          </div>
        </div>
      </>
    )
  }
}
